
<!-- 由于vue是dom异步渲染，当数据都更新结束时，才会更新dom。所以下面 this.$refs.inp.focus()不能获取到dom对象，要用$nextTick() 解决-->
 <!-- $nextTick()： 当dom更新后，才会执行 -->
<template>
  <div>
    <!-- 1.给dom或组件绑定ref属性 -->
    <input ref="inp" type="text" v-if="isshow" >
    <button @click="fn">显示</button>
  </div>
</template>
<script>


export default {
  data(){
    return{
      isshow:false
    }
  },
  methods:{
    fn(){
  this.isshow=!this.ishow
  //  2.通过this.$refs.ref属性获取dom元素
  // this.$refs.inp.focus()    改进为：
   this.$nextTick(()=>{
    this.$refs.inp.focus()
   })
}
  }
}
</script>
<style>
</style>